<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>画布canvas</title>
	</head>
	<body>
		<button id="save">保存</button>
		<button id="mode">橡皮擦</button>
		<input type="number" id="size" value="2" />
		<input type="color" name="" id="selectcolor" value="" />
		<img src="" id="gg" style="width: 200px;height: 200px;" />
		<h1></h1>
		<canvas id="demo" width="500" height="500" style="border: 1px solid red;"></canvas>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			var demo = $("#demo")
			var ctx = demo[0].getContext("2d")
			var canmove = false
			$("#demo").mousedown(function(e) {
				canmove = true
				ctx.beginPath()
				//closePath()起点与终点不能很好的连接 
				//beginPath()在完成一条路径之后开始另一条路径 
				ctx.moveTo(e.offsetX, e.offsetY) //moveTo()用来指定绘制线段的起点 
			})
			$(window).mouseup(function() {
				canmove = false
			})
			$("#demo").mousemove(function(e) {
				if (canmove) {
					if (draw) {
						ctx.lineTo(e.offsetX, e.offsetY) //lineTo()用来指定绘制线段的终点（或者是途经点） 
						ctx.stroke() // 绘制行为 (决定如何绘制),stroke()表示绘制空心图形，绘制实心图形的fill() 
					} else {
						ctx.clearRect(e.offsetX - 15, e.offsetY - 15, 30, 30)
					}
				}
			})
			$("#selectcolor").change(function() {
				ctx.strokeStyle = $(this).val() // 设置描边的样式
			})
			$("#size").change(function() {
				ctx.lineWidth = $(this).val() //改变线段宽度 
			})
			var draw = true
			$("#mode").click(function() {
				draw = !draw
				$("#mode").text($("#mode").text() === "橡皮擦" ? "画笔" : "橡皮擦")
			})
			$("#save").click(function() {
				$("#gg").prop("src", demo[0].toDataURL("image/png"))
			})
		</script>
	</body>
</html>
